<!--
 * @Author: liyaqi liyaqi0126@163.com
 * @Date: 2024-09-05 17:08:06
 * @LastEditors: liyaqi liyaqi0126@163.com
 * @LastEditTime: 2024-09-07 17:18:56
 * @FilePath: \FinancialLeasing-FG-FLCompany\src\views\systemConfig\bankAccount\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="app-container">
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                    type="primary"
                    plain
                    icon="el-icon-plus"
                    size="mini"
                    @click="handleAdd"
                >新增
                </el-button>
            </el-col>
        </el-row>
  
        <el-table v-loading="loading" :data="bankAcountList">
            <el-table-column label="账户名称" prop="accountName" :show-overflow-tooltip="true" min-width="150"/>
            <el-table-column label="账号" prop="accountNumber" :show-overflow-tooltip="true" min-width="150"/>
            <el-table-column label="开户行" prop="openBank" :show-overflow-tooltip="true" min-width="150"/>
            <el-table-column label="行号" prop="bankNumber" :show-overflow-tooltip="true" min-width="150"/>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
                <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-edit"
                    @click="handleUpdate(scope.row)"
                    >修改
                </el-button>
                <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click="handleDelete(scope.row)"
                    >删除
                </el-button>
            </template>
            </el-table-column>
        </el-table>
  
        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />
  
        <!-- 添加或修改银行账户对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body :close-on-click-modal="false">
            <el-form ref="form" :model="form" :rules="rules" label-width="130px">
                <el-form-item label="账户名称" prop="accountName">
                    <el-input v-model="form.accountName" placeholder="请输入账户名称"/>
                </el-form-item>
                <el-form-item label="账号" prop="accountNumber">
                    <el-input v-model="form.accountNumber" placeholder="请输入账号"/>
                </el-form-item>
                <el-form-item label="开户行" prop="openBank">
                    <el-input v-model="form.openBank" placeholder="请输入开户行"/>
                </el-form-item>
                <el-form-item label="行号" prop="bankNumber">
                    <el-input v-model="form.bankNumber" placeholder="请输入行号"/>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
  
      
    </div>
</template>
  
<script>
import { listBankAccount, addBankAccount, updateAccount, delAccount } from '@/api/systemConfig/bankCount'

export default {
    name: 'bankAccount',
    dicts: [],
    data() {
        return {
            // 遮罩层
            // loading: true,
            loading: false,
            // 总条数
            total: 0,
            // 银行账户数据
            bankAcountList: [],
            // 弹出层标题
            title: '',
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                accountName: [
                    { required: true, message: '账户名称不能为空', trigger: 'blur' }
                ],
                accountNumber: [
                    { required: true, message: '账号不能为空', trigger: 'blur' }
                ],
                openBank: [
                    { required: true, message: '开户行不能为空', trigger: 'blur' }
                ],
                bankNumber: [
                    { required: true, message: '行号不能为空', trigger: 'blur' }
                ],
            }

        }
    },
    created() {
      this.getList()
    },
    methods: {
        /** 查询银行账户列表 */
        getList() {
            this.loading = true
            listBankAccount(this.queryParams).then(response => {
                this.bankAcountList = response.rows
                this.total = response.total
                this.loading = false
            }
            )
        },

        // 取消按钮
        cancel() {
            this.open = false
            this.reset()
        },

        // 表单重置
        reset() {
            this.form = {
                id: undefined,
                accountName: undefined,
                accountNumber: undefined,
                openBank: undefined,
                bankNumber: undefined,
            }
            this.resetForm('form')
        },

        /** 新增按钮操作 */
        handleAdd() {
            this.reset()
            this.open = true
            this.title = '添加银行账户'
        },

        /** 修改按钮操作 */
        handleUpdate(row) {
            this.reset()
            this.form.id = row.id
            this.form.accountName = row.accountName
            this.form.accountNumber = row.accountNumber
            this.form.openBank = row.openBank
            this.form.bankNumber = row.bankNumber
            this.open = true
            this.title = '修改银行账户'
        },
        
        /** 提交按钮 */
        submitForm: function() {
            this.$refs['form'].validate(valid => {
                if (valid) {
                    if (this.form.id != undefined) {
                        updateAccount(this.form).then(response => {
                            this.$modal.msgSuccess('修改成功')
                            this.open = false
                            this.getList()
                        })
                    } else {
                        addBankAccount(this.form).then(response => {
                            this.$modal.msgSuccess('新增成功')
                            this.open = false
                            this.getList()
                        })
                    }
                }
            })
        },
        
        /** 删除按钮操作 */
        handleDelete(row) {
            this.$modal.confirm('是否确认删除该数据项？').then(function() {
                return delAccount(row.id)
            }).then(() => {
                this.getList()
                this.$modal.msgSuccess('删除成功')
            }).catch(() => {
            })
        },

    }
}
</script>